<template>
    <div class="footer">
        <div class="footer_help">
            <div class="footer-links">
                <a href="javascript:;">资源</a>
                <a href="javascript:;">设计资源</a>
                <a href="javascript:;">图标库</a>
            </div>
            <div class="footer-links">
                <a href="javascript:;">帮助</a>
                <a href="javascript:;">常见问题</a>
                <a href="javascript:;">更新日志</a>
                <a href="javascript:;">报告Bug</a>
            </div>
            <div class="footer-links">
                <a href="javascript:;">社区</a>
                <a href="javascript:;">GitHub</a>
                <a href="javascript:;">Discord</a>
                <a href="javascript:;">钉钉</a>
            </div>
            <div class="footer-links">
                <a href="javascript:;">加入我们</a>
                <a href="javascript:;">图森未来</a>
                <a href="javascript:;">联系我们</a>
            </div>
        </div>
        <div class="footer_in">
            <div class="footer_in_left">
                <p class="link">
                    <a href="https://weibo.com/ITxiaomage" target="_blank" class="iconfont icon-weibo"></a>
                    <span class="qq">
                    <a href="javascript:;" class="iconfont icon-qq"></a>
                    <img src="http://www.520it.com/ke/images/weixin.jpg" alt="">
                </span>
                    <a href="http://520it.com/aboutus" target="_blank">关于我们</a>
                    <a href="http://bbs.520it.com" target="_blank">FAQ</a>
                    <a href="http://520it.com/" target="_blank">友情链接</a>
                </p>
                <p class="copy">版权所有：2017广州小码哥教育科技有限公司 —— <strong>欧吉课堂</strong></p>
            </div>
            <h2 class="footer_r">
                <a href="http://520it.com/" target="_blank">
                    <img class="img" src="http://www.520it.com/ke/images/logo.png" alt="">
                </a>
            </h2>
        </div>
    </div>
</template>

<script>
  import { defineComponent } from 'vue'
  export default defineComponent({
    name: 'Footer'
  });
</script>

<style lang="scss" scoped>
.footer {
    width: 1200px;
    height: 160px;
    margin: 0 auto;
    margin-top: 20px;

    background-color: #fff;
    .footer_help {
        display: flex;
        width: 100%;
        height: 100px;
        justify-content: space-around;
        .footer-links {
            width: 120px;
            height: 100px;
            display: flex;
            align-items: center;
            /*background-color: pink;*/
            flex-direction: column;
            justify-content: space-between;
        }

    }
    .footer_in {
        position: relative;
        width: 100%;
        margin-top: 40px ;
        display: flex;
        justify-content: space-between;
        overflow: hidden;
        .icon-weibo {
            color: crimson;
            font-size: 20px;
            margin-left: 5px;
        }
        .qq {
            &:hover.img{
                opacity: 1;
            }
            .icon-qq {
                color: skyblue;
                font-size: 20px;

            }
            img {
                position: absolute;
                top: 0;
                z-index: 9999;
                left: 45px;
                width: 50px;
                height: 50px;
                opacity: 0;
            }

        }

        a {
            color: #848484;
            font-size: 12px;
        }
     .copy {
         color: #848484;
         font-size: 12px;
     }
    }
}
</style>
